import React from 'react'
import './DevRankList.css'
import GrayBorderRoundAvatar from "../GrayBorderRoundAvatar/GrayBorderRoundAvatar";
import TopOneIcon from "../../res/images/web/shared/fans-top-1.png";
import TopTwoIcon from "../../res/images/web/shared/fans-top-2.png";
import TopThreeIcon from "../../res/images/web/shared/fans-top-3.png";

const DevRankList = props => {
    const {
        fans,
        color,
        bg,
    } = props

    const rankTemplate = (fans.map((fan, index) => {
        const m = {
            0: TopOneIcon,
            1: TopTwoIcon,
            2: TopThreeIcon,
        }

        const rankNo = m[index] ? <img src={m[index]} alt=''/> : <span>{index + 1}</span>
        return (
            <div
                className='devote-rank-item-ctn flex' key={index}
                style={{
                    backgroundColor: bg,
                }}
            >
                <div
                    className='devote-rank-item-no'
                >
                    {rankNo}
                </div>
                <div
                    key={index}
                    className='flex-space-between-align-center devote-rank-item-main'
                    style={{
                        background: bg ? 'transparent' : '',
                        borderBottom: bg ? 'none' : '',
                    }}
                >
                    <div className='flex-space-between-align-center'>
                        <div
                            className='flex-space-between-align-center devote-rank-item-info'
                        >
                            <GrayBorderRoundAvatar
                                avatarUrl={fan.iconUrl}
                                size='s'
                            />
                            <span
                                style={{
                                    color: color,
                                }}
                            >{fan.name}</span>
                        </div>
                    </div>
                    <div className='devote-rank-item-dev'>
                        <span
                            style={{
                                color: color,
                            }}
                        >贡献值</span>
                        <p
                            style={{
                                color: color,
                            }}
                        >{fan.devote}</p>
                    </div>
                </div>
            </div>
        )
    }))

    return rankTemplate
}

export default DevRankList
